<template>
    <div id="Mine">
        <section class="c-info" @click="$pushRoute('/profile')">
            <van-image class="c-info__avatar" fit="cover" :src="userInfo.avatar"/>
            <em class="c-info__name">{{ userInfo.realname }}</em>
            <van-icon name="arrow" class="c-info__icon"/>
        </section>
        <van-cell-group>
            <van-cell v-for="([label,url,icon],i) in cellList" :key="i" :title="label" @click="$pushRoute(url)" is-link>
                <div slot="icon" class="cell-icon">
                    <van-icon class="cell-icon__cmp" :name="icon"/>
                </div>
            </van-cell>
        </van-cell-group>
    </div>
</template>
<script lang="ts">
    import Vue, {ComponentOptions, VueConstructor} from "vue"
    import Component from 'vue-class-component'
    import {mapActions, mapState} from "vuex";

    export const meta = {authValid: true};
    @Component({computed: mapState(["userInfo"]), methods: mapActions(["initUser"])})
    export default class Mine extends Vue implements ComponentOptions<Vue> {
        name = "Mine";
        cellList = [["我的提问", "/mine/question", "smile-o"], ["我的活动", "/mine/activity", "vip-card-o"],
            ["我的投递", "/mine/delivery", "cluster-o"], ["我的简历", "/mine/resume", "orders-o"]];
        initUser!: any;
        created() {
            this.initUser();
        }
    }
</script>

<style scoped lang="scss">
    @import "~assets/common.scss";
    #Mine {
        .c-info {
            @include alignCenter;
            padding: 16px;
            background: #fff;
            margin-bottom: 20px;
            &__avatar {
                @include round(72px);
                flex-shrink: 0;
            }
            &__name {
                font-size: 18px;
                margin: 0 auto 6px 10px;
            }
            &__icon {
                font-size: 18px;
                color: #969799;
            }
        }
        .cell-icon {
            margin-right: 6px;
            color: $p-color;
            @include alignCenter;
            &__cmp {
                font-size: 22px;
            }
        }
    }
</style>
